import React, { useState, useRef } from 'react'
// import './index.css'
import {useNavigate} from 'react-router-dom'
function Creates() {
  const navigate = useNavigate()
  const [activeTab, setActiveTab] = useState(0);
  const Recommended = [
    'https://photo-static-api.fotomore.com/creative/vcg/400/new/VCG41N1434586232.jpg?uid=364&timestamp=1737013942&sign=f00589716698f7c7b75d9943071c47a6&imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp',
    'https://photo-static-api.fotomore.com/creative/vcg/400/new/VCG41N2155428291.jpg?uid=364&timestamp=1737013942&sign=f00589716698f7c7b75d9943071c47a6&imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp',
    'https://photo-static-api.fotomore.com/creative/vcg/400/new/VCG41N2155516331.jpg?uid=364&timestamp=1737013942&sign=f00589716698f7c7b75d9943071c47a6&imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp',
    'https://photo-static-api.fotomore.com/creative/vcg/400/new/VCG41N2068643533.jpg?uid=364&timestamp=1737013942&sign=f00589716698f7c7b75d9943071c47a6&imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp',
    'https://photo-static-api.fotomore.com/creative/vcg/400/new/VCG41N2068646130.jpg?uid=364&timestamp=1737013942&sign=f00589716698f7c7b75d9943071c47a6&imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp',
    'https://photo-static-api.fotomore.com/creative/vcg/400/new/VCG41N2068647192.jpg?uid=364&timestamp=1737013942&sign=f00589716698f7c7b75d9943071c47a6&imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp',
    'https://photo-static-api.fotomore.com/creative/vcg/400/new/VCG41N2068644052.jpg?uid=364&timestamp=1737013942&sign=f00589716698f7c7b75d9943071c47a6&imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp',
    'https://photo-static-api.fotomore.com/creative/vcg/400/new/VCG41N2068646140.jpg?uid=364&timestamp=1737013942&sign=f00589716698f7c7b75d9943071c47a6&imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp',
  ]
   const [typeface, setTypeface] = useState([
    { id: 1, img: 'https://pub-cdn-oss.chuangkit.com/materials/2025/01/13/fd5baba2-908c-4743-bfda-8e34a5dece9a', selected: false },
    { id: 2, img: 'https://pub-cdn-oss.chuangkit.com/materials/2025/01/13/fd5baba2-908c-4743-bfda-8e34a5dece9a', selected: false },
    { id: 3, img: 'https://pub-cdn-oss.chuangkit.com/materials/2025/01/13/fd5baba2-908c-4743-bfda-8e34a5dece9a', selected: false },
    { id: 4, img: 'https://pub-cdn-oss.chuangkit.com/materials/2025/01/13/fd5baba2-908c-4743-bfda-8e34a5dece9a', selected: false },
    { id: 5, img: 'https://pub-cdn-oss.chuangkit.com/materials/2025/01/13/fd5baba2-908c-4743-bfda-8e34a5dece9a', selected: false },
    { id: 6, img: 'https://pub-cdn-oss.chuangkit.com/materials/2025/01/13/fd5baba2-908c-4743-bfda-8e34a5dece9a', selected: false },
    { id: 7, img: 'https://pub-cdn-oss.chuangkit.com/materials/2025/01/13/fd5baba2-908c-4743-bfda-8e34a5dece9a', selected: false },
    { id: 8, img: 'https://pub-cdn-oss.chuangkit.com/materials/2025/01/13/fd5baba2-908c-4743-bfda-8e34a5dece9a', selected: false },
    { id: 9, img: 'https://pub-cdn-oss.chuangkit.com/materials/2025/01/13/fd5baba2-908c-4743-bfda-8e34a5dece9a', selected: false },
    { id: 10, img: 'https://pub-cdn-oss.chuangkit.com/materials/2025/01/13/fd5baba2-908c-4743-bfda-8e34a5dece9a', selected: false },
  ]);
  //全选反选删除
  const [allSelected, setAllSelected] = useState(false);

  // 处理全选/反选功能的函数
  const handleSelectAll = () => {
    const newAllSelected = !allSelected;
    const newItems = typeface.map(item => ({
      ...item,
      selected: newAllSelected
    }));
    setAllSelected(newAllSelected);
    setTypeface(newItems);
  };

  // 处理删除功能的函数
  const handleDeleteSelected = () => {
    const newItems = typeface.filter(item => !item.selected);
    setTypeface(newItems);
    setAllSelected(false);
  }
  // 处理单个商品选择的函数
  const handleItemSelect = (itemId) => {
    const newItems = typeface.map(item =>
      item.id === itemId ? { ...item, selected: !item.selected } : item
    );
    const newAllSelected = newItems.every(item => item.selected);
    setTypeface(newItems);
    setAllSelected(newAllSelected);
  };

  const design = () =>{
    navigate('/DesignPage')
  }

  const tabs = [
    {
      id: 0,
      title: "图片",
      content: [
        <div key={0}>
          <div style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            padding: "10px",
          }}>
            <div>
              <img style={{ width: "150px", height: "80px" }} src="https://pub-cdn-oss.chuangkit.com/material_kind/first_kind_background_image/2023/05/19/8bbb3338-0bf1-4840-89b7-a6d2c583f1cc" alt="" />
            </div>
            <div>
              <img style={{ width: "150px", height: "80px" }} src="https://pub-cdn-oss.chuangkit.com/material_kind/first_kind_background_image/2023/05/19/ce491dfa-281f-466f-aaed-29462c3e86a7" alt="" />
            </div>
            <div>
              <img style={{ width: "150px", height: "80px" }} src="https://pub-cdn-oss.chuangkit.com/material_kind/first_kind_background_image/2023/05/19/c6936abf-c737-4e72-be1a-a3e79adca37c" alt="" />
            </div>
            <div>
              <img style={{ width: "150px", height: "80px" }} src="https://pub-cdn-oss.chuangkit.com/material_kind/first_kind_background_image/2023/05/19/6ec96600-b00e-4d54-9f0a-ecf71a5f5485" alt="" />
            </div>
            <div>
              <img style={{ width: "150px", height: "80px" }} src="https://pub-cdn-oss.chuangkit.com/material_kind/first_kind_background_image/2023/03/15/cd80f3ef-3420-426d-a1ce-e50caaf0e3c1" alt="" />
            </div>
            <div>
              <img style={{ width: "150px", height: "80px" }} src="https://pub-cdn-oss.chuangkit.com/material_kind/first_kind_background_image/2023/03/15/ae13a819-f251-4f75-b385-87c6e500de68" alt="" />
            </div>
            <div>
              <img style={{ width: "150px", height: "80px" }} src="https://pub-cdn-oss.chuangkit.com/material_kind/first_kind_background_image/2023/05/19/3e6a2a64-03c4-4745-bdca-38b7cdc9d8c4" alt="" />
            </div>
          </div>
          <h2>为你推荐</h2>
          <div style={{
            display: "flex",
            flexWrap: "wrap",
            justifyContent: "space-between",
          }}>
            {
              Recommended.map((item, index) => {
                return <div key={index} onClick={design}>
                  <img style={{ width: "260px", height: '150px' }} src={item} alt="" />
                </div>
              })
            }
          </div>
        </div>,
      ],
    },
    {
      id: 1,
      title: "素材",
      content: [
        <div key={0}>
          <div>
            <ul style={{
              listStyleType: "none",
              padding: 0,
              display: "flex",
              flexWrap: "wrap",
              fontWeight: "bold",
              justifyContent: 'center'
            }}>
              <li style={{
                width: "100px",
                height: "50px",
                lineHeight: "50px",
                textAlign: "center",
                border: "1px solid #ccc",
                borderRadius: "25px",
                margin: "5px",
              }}>组合字体</li>
              <li style={{
                width: "100px",
                height: "50px",
                lineHeight: "50px",
                textAlign: "center",
                border: "1px solid #ccc",
                borderRadius: "25px",
                margin: "5px",
              }}>宋体</li>
              <li style={{
                width: "100px",
                height: "50px",
                lineHeight: "50px",
                textAlign: "center",
                border: "1px solid #ccc",
                borderRadius: "25px",
                margin: "5px",
              }}>黑体</li>
              <li style={{
                width: "100px",
                height: "50px",
                lineHeight: "50px",
                textAlign: "center",
                border: "1px solid #ccc",
                borderRadius: "25px",
                margin: "5px",
              }}>楷体</li>
              <li style={{
                width: "100px",
                height: "50px",
                lineHeight: "50px",
                textAlign: "center",
                border: "1px solid #ccc",
                borderRadius: "25px",
                margin: "5px",
              }}>圆体</li>
              <li style={{
                width: "100px",
                height: "50px",
                lineHeight: "50px",
                textAlign: "center",
                border: "1px solid #ccc",
                borderRadius: "25px",
                margin: "5px",
              }}>书法</li>
              <li style={{
                width: "100px",
                height: "50px",
                lineHeight: "50px",
                textAlign: "center",
                border: "1px solid #ccc",
                borderRadius: "25px",
                margin: "5px",
              }}>仿宋</li>
              <li style={{
                width: "100px",
                height: "50px",
                lineHeight: "50px",
                textAlign: "center",
                border: "1px solid #ccc",
                borderRadius: "25px",
                margin: "5px",
              }}>创意字体</li>
            </ul>
          </div>
        </div>,
      ],
    },
    {
      id: 2,
      title: "字体",
      content: [
        <div key={2}>
          <div>
            <ul style={{
              listStyleType: "none",
              padding: 0,
              display: "flex",
              flexWrap: "wrap",
              fontWeight: "bold",
              justifyContent: 'center'
            }}>
              <li style={{
                width: "100px",
                height: "50px",
                lineHeight: "50px",
                textAlign: "center",
                border: "1px solid #ccc",
                borderRadius: "25px",
                margin: "5px",
              }}>组合字体</li>
              <li style={{
                width: "100px",
                height: "50px",
                lineHeight: "50px",
                textAlign: "center",
                border: "1px solid #ccc",
                borderRadius: "25px",
                margin: "5px",
              }}>宋体</li>
              <li style={{
                width: "100px",
                height: "50px",
                lineHeight: "50px",
                textAlign: "center",
                border: "1px solid #ccc",
                borderRadius: "25px",
                margin: "5px",
              }}>黑体</li>
              <li style={{
                width: "100px",
                height: "50px",
                lineHeight: "50px",
                textAlign: "center",
                border: "1px solid #ccc",
                borderRadius: "25px",
                margin: "5px",
              }}>楷体</li>
              <li style={{
                width: "100px",
                height: "50px",
                lineHeight: "50px",
                textAlign: "center",
                border: "1px solid #ccc",
                borderRadius: "25px",
                margin: "5px",
              }}>圆体</li>
              <li style={{
                width: "100px",
                height: "50px",
                lineHeight: "50px",
                textAlign: "center",
                border: "1px solid #ccc",
                borderRadius: "25px",
                margin: "5px",
              }}>书法</li>
              <li style={{
                width: "100px",
                height: "50px",
                lineHeight: "50px",
                textAlign: "center",
                border: "1px solid #ccc",
                borderRadius: "25px",
                margin: "5px",
              }}>仿宋</li>
              <li style={{
                width: "100px",
                height: "50px",
                lineHeight: "50px",
                textAlign: "center",
                border: "1px solid #ccc",
                borderRadius: "25px",
                margin: "5px",
              }}>创意字体</li>
            </ul>
          </div>
          <button onClick={handleSelectAll}>
            {allSelected ? '取消全选' : '全选'}
          </button>
          <button onClick={handleDeleteSelected}>删除</button>
          <div style={{
            width: "100%",
            height: "100%",
            display: "flex",
            flexWrap: "wrap",
          }}>
            {
              typeface.map((item, index) => {
                return <div key={index} style={{
                  width: "150px",
                  height: "150px",
                  border: "1px solid #ccc",
                  marginLeft: '60px',
                  marginTop: '10px',
                }}>
                  <input type="checkbox" checked={item.selected}
                    onChange={() => handleItemSelect(item.id)} />
                  <img style={{
                    width: "130px",
                    height: "130px",
                  }
                  } src={item.img} alt="" />
                </div>
              })
            }
          </div>
        </div>,
      ],
    },
  ];
  return (
    <div>
      <div style={{
        width: "100%",
        height: "100%",
        padding: "10px",
        backgroundColor: "#00f",
      }}>
        <div style={{
          width: "350px",
          padding: "10px",
          flexDirection: "column",
          alignItems: "center",
          marginLeft: '500px',

        }}>
          <ul style={{ listStyleType: "none", padding: 0, display: "flex" }}>
            {tabs.map((tab) => (
              <li
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                style={{
                  padding: "10px",
                  cursor: "pointer",
                  backgroundColor: activeTab === tab.id ? "#0ff" : "transparent",
                  marginBottom: "5px",
                  borderRadius: '50%'
                }}
              >
                {tab.title}
              </li>
            ))}
          </ul>
        </div>
      </div>
      <div>
        <p>{tabs[activeTab].content}</p>
      </div>
    </div>
  )
}
export default Creates
